<template>
<div class="main">
    <Search  v-show="showSearch" :placeholder="typeof showSearch  === 'string'  ?  showSearch  : undefined "/>
    <Top :menuList="menuList"  @itemChange="itemChange" :defActiveName="defActiveName" />
    <Content :select-list="selectList" :key="defActiveName" ref="content"  />
</div>
</template>
<script setup lang="ts" name="">
import Top from "./components/Top/index.vue";
import Content from "./components/Content/index.vue";
import Search from "./components/Search/index.vue";
import {Menu,SelectList,SelValue} from "./interface";
import {ref} from "vue";
interface MenuProps{
    menuList?: Array<Menu>;        //栏目数据
    showSearch?:boolean|string;   //是否显示搜索框
    defActiveName?:number;          //头部默认选择第几个
    selectList?:Array<SelectList>;  //选项数组
}
const emits = defineEmits<{
    (event:"topChange",item:Menu):void
}>();
const content = ref<InstanceType<typeof Content>>();

withDefaults( defineProps<MenuProps>(),{
    menuList:() => [],
    showSearch:false,
    defActiveName:0,
    selectList:()=>[]
});
const itemChange = (item:Menu)=> emits('topChange',item);

const  initSel = (selValue:Array<SelValue>)=> content.value?.initSel(selValue);

defineExpose({initSel});



</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./index.scss";
}
</style>